<template>
  <view class="chat-container">
    <scroll-view scroll-y class="message-list">
      <view
        v-for="(msg, index) in messages"
        :key="index"
        class="message-item"
        :class="{ self: msg.isSelf, other: !msg.isSelf }"
      >
        <view class="message-wrapper">
          <view class="avatar-wrapper">
            <view class="sender-name">{{ msg.isSelf ? "我" : consultantInfo.name +"咨询师" }}</view>
            <image
              class="avatar"
              :src="msg.isSelf ? userInfo.avatar : consultantInfo.avatar"
              mode="aspectFill"
            />
          </view>
          <view class="message-content">
            <view class="message-text">
              {{ msg.payload.text }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      userInfo: {
        avatar: "", // 可根据实际替换
      },
      consultantInfo: {
		name:"",
        avatar: "",
      },
    };
  },
  async onLoad(options) {
	// 从本地存储中读取数据
	  const chatData = uni.getStorageSync('chatData');
	  
	  if (!chatData || !chatData.fileUrl) {
		uni.showToast({ title: "未传入聊天记录文件地址", icon: "none" });
		return;
	  }

	  const { fileUrl, userAvatar, consultantAvatar, consultantName } = chatData;

	  try {
		const res = await uni.request({ url: fileUrl });
		const content = res.data;

		this.messages = this.parseTxtToMessages(content);

		// 将头像和咨询师名字存储到页面的 data 中
		this.userInfo.avatar = userAvatar || '';  // 用户头像
		this.consultantInfo.avatar = consultantAvatar || '';  // 咨询师头像
		this.consultantInfo.name = consultantName || '';  // 咨询师名字
	  } catch (e) {
		console.error("聊天记录加载失败", e);
		uni.showToast({ title: "聊天记录加载失败", icon: "none" });
	  }
  },
  methods: {
    parseTxtToMessages(txt) {
      const lines = txt.trim().split(/\r?\n/);
      const msgs = [];
      for (const line of lines) {
        if (line.startsWith("咨询师ID") || line.startsWith("用户ID")) {
          continue; // 跳过头两行
        }

        const [role, ...msgParts] = line.split("：");
        const text = msgParts.join("：").trim();

        if (role === "咨询师" || role === "用户") {
          msgs.push({
            isSelf: role === "用户",
            senderNickname: role,
            payload: { text },
            timestamp: Date.now(), // 可用当前时间模拟
          });
        }
      }
      return msgs;
    },
  },
};
</script>

<style scoped>
/* 	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	} */

	.chat-container {
		/* padding: 20rpx; */
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.message-list {
		height: calc(100vh - 140rpx);
		overflow-y: auto;
		/* margin-bottom: 120rpx; */
		/* padding: 20rpx; */
	}
	

	.message-item {
		padding: 15rpx;
		display: flex;
		flex-direction: column;
		margin-bottom: 30rpx;
		align-items: flex-start;
	}

	.message-item.self {
		align-items: flex-end;
	}

	.message-wrapper {
		display: flex;
		align-items: flex-start;
		width: 100%;
	}

	.message-item.self .message-wrapper {
		flex-direction: row-reverse;
	}

	.avatar-wrapper {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20rpx;
	}

	.message-item.self .avatar-wrapper {
		margin-right: 0;
		margin-left: 20rpx;
	}

	.sender-name {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
		text-align: center;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
		flex-shrink: 0;
	}

	.avatar image {
		width: 100%;
		height: 100%;
	}

	.message-content {
		max-width: 60%;
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 4rpx 20rpx 20rpx 20rpx;
		position: relative;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		margin-top: 28rpx;
	}

	.message-item.self .message-content {
		background-color: #95ec69;
		border-radius: 20rpx 4rpx 20rpx 20rpx;
	}

	.message-text {
		font-size: 28rpx;
		line-height: 1.5;
		word-break: break-all;
	}


	.message-item.self .message-time {
		text-align: center;
	}



</style> 